<template>
  <!-- 服务组弹窗 -->
    <Modal v-model="pvcVisible" title="新增存储卷" :mask-closable="false" @on-cancel="pvcManiCancel">
      <div class="modal-add">
        <Form ref="pvcForm" :model="pvcForm" :rules="pvcRules" :label-width="90" label-position="left">
          <FormItem label="名称" prop="id">
            <Input v-model.trim="pvcForm.id" placeholder="请输入存储卷名称"></Input>
          </FormItem>
          <FormItem label="请求大小(Gi)" prop="storageSize">
            <Input v-model.trim="pvcForm.storageSize" placeholder="例如：2"></Input>
          </FormItem>
          <FormItem label="访问模式">
            <Select v-model="pvcForm.accessModes">
              <Option :value="access" v-for="access in accessList" :key="access">{{access}}</Option>
            </Select>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="warning" @click="pvcManiCancel">取消</Button>
        <Button type="primary" :loading="isAdding" @click="pvcManiConf">确定</Button>
      </div>
    </Modal>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  data() {
    const validateName = (rule, value, callback) => {
      let regName = /^(?![A-Z0-9-])(?!.*?-$)[a-z0-9-]{1,}$/
      if (!value) {
        callback(new Error('请输入名称'))
      } else if (!regName.test(value)) {
        callback(new Error('必须以小写字母开头，只能包含小写字母、数字以及「-」连字符'))
      } else if (value.length < 4) {
        callback(new Error('最小长度不能少于4位'))
      } else if (value.length > 32) {
        callback(new Error('最大长度不能大于32位'))
      } else {
        callback()
      }
    }

    const validateStorageSize = (rule, value, callback) => {
      let regStorageSize = /^[1-9]\d{0,2}$/
      if (!value) {
        callback(new Error('请输入请求大小'))
      } else if (!regStorageSize.test(value)) {
        callback(new Error('请输入1-999的整数'))
      } else {
        callback()
      }
    }

    return {
      pvcForm: {
        environmentId: '',
        id: '',
        storageSize: '',
        accessModes: 'ReadWriteMany'
      },
      isAdding: false,
      pvcRules: {
        id: [{required: true, trigger: 'blur', validator: validateName}],
        storageSize: [{required: true, trigger: 'blur', validator: validateStorageSize}]
      },
      pvcVisible: false,
      accessList: ['ReadWriteMany', 'ReadWriteOnce', 'ReadOnlyMany']
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
  },
  methods: {
    // 确认存储卷操作
    pvcManiConf() {
      this.$refs['pvcForm'].validate((valid) => {
        if (valid) {
          this.isAdding = true
          this.pvcForm.environmentId = this.$route.params.environmentId
          Fetch.post({
            url: '/api/environments/' + this.$route.params.environmentId + '/persistentvolumeclaims',
            params: this.pvcForm
          }).then((res) => {
            if (res && res.code === '0') {
              this.$Message.success({
                content: '存储卷' + this.pvcForm.id + '添加成功！',
                duration: this.DURATION
              })
              this.$emit('update:visible', false)
              this.$emit('finish', this.pvcForm.id)
            } else {
              this.$Message.warning({
                content: res.message || '服务器内部错误',
                duration: this.DURATION
              })
            }
            this.isAdding = false
          }).catch((err) => {
            this.isAdding = false
            this.$Message.error(err.message)
          })
        }
      })
    },
    // 取消存储卷操作
    pvcManiCancel() {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.pvcVisible = val
      if (val) {
        this.$refs.pvcForm.resetFields()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.file-body {
  margin-bottom: 14px;
  .file-name {
    margin-bottom: 10px;
  }
  .file-remove {
    display: none;
    position: absolute;
    right: -8px;
    top: -8px;
    font-size: 22px;
    cursor: pointer;
    color: #e45049;
  }
  &:hover {
    .file-remove {
      display: block;
    }
  }
  .ivu-form-item-error-tip {
    margin-top: -13px;
  }
}
</style>
